<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .shop-car {}

    .shop-car span {
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border: 1px solid gainsboro;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>购物车案例：</h1>
    <table class="shop-car" cellspacing="0" border="1" width="1000">
      <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>单价</th>
          <th width="200">数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
          <td>{{index +1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}元</td>
          <td><span @click="add(item.id)">+</span> {{item.num}} <span @click="jian(item.id)">-</span></td>
          <td>{{(item.price * item.num).toFixed(2)}}元</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总计：</td>
          <!-- <td colspan="4">{{totalPrice}}</td> -->
          <td colspan="4">{{totalPriceByWatch}} 元</td>

        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    /*   let arr = [1, 2, 3, 4, 5]
      let sum = 0;
      sum = arr.reduce((total, value) => {
        // console.log('total=', total, 'value=', value); //total= 0 value= 1
        // total,用于callback里面计算和的变量。每循环一次，在把total传入callback，再和value相加， 而他们的和，又被赋值给total这个变量。
        // 循环结束后，返回total的z最终值。
        return total + value;
      }, 0) */

    // console.log('sum=', sum);
    let vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: '衣服', num: 1, price: 10.55 },
          { id: 2, name: '裤子', num: 2, price: 20.12 },
          { id: 3, name: '鞋', num: 3, price: 3.45 },
          { id: 4, name: '裙子', num: 4, price: 1.5 },
          { id: 5, name: '袜子', num: 5, price: 10.3 },
        ],
        totalPriceByWatch: 0,
      },
      methods: {
        add(id) {
          this.list.find((el) => el.id === id).num++;
        },
        jian(id) {
          let obj = this.list.find((el) => el.id === id);
          obj.num = obj.num >= 1 ? --obj.num : 0;
        }
      },
      watch: {
        list: {
          handler: function (val, oldval) { // val,新的值， oldval,改变之前的值
            console.log(val, oldval);
            let total = this.list.reduce((sum, item) => {
              return sum + item.num * item.price;
            }, 0);

            this.totalPriceByWatch = total.toFixed(2);
          },
          deep: true, // 深入的监听。
          immediate: true  // 加载完页面，就要执行handler（）；
        },
        // 普通语法，watch写成一个函数
        // a:function(){
        // }
      },
      computed: {//计算属性是基于它们的响应式依赖进行缓存的
        totalPrice() {
          let total = this.list.reduce((sum, item) => {
            return sum + item.num * item.price;
          }, 0);
          return total.toFixed(2) + "元";

        }
      }
    });
  </script>
</body>

</html>